<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2023-11-01 22:05:37
 * @LastEditors: sueRimn
 * @LastEditTime: 2025-07-03 08:26:43
-->
<template>
  <!-- #ifndef MP-TOUTIAO -->
  <view class="tab-bg">
    <view class="tab-bar d-flex">

      <view
         v-for="(item, index) in list" :key="index"
        :class="type == item.type ? 'active' : ''">
        <view class="item d-flex flex-column align-items-center justify-content-center" v-if="item.type!='category'" @click="switchTab(item, index)">
        <common-image :src="type == item.type ? item.selectIcon : item.icon" :styles="'width: 56rpx; height: 56rpx'"  />
        <view class="text">{{ item.text }}</view>
        </view>
        <view v-else class="btn" @click="handleCategory">
        </view>
      </view>

    </view>
  </view>
  <!-- #endif -->
</template>



<script>
export default {
  props: {
    type: {
      type: String,
      default: "home"
    }
  },
  data() {
    return {
      color: "#333333",
      selectedColor: "#226BFF",
      selected: 0,
      list: [{
        type: "home",
        pagePath: "/pages/index/index",
        icon: "https://image.chushouya.com/assets/images/nav/tabar_homepage_unselected.png",
        selectIcon: "https://image.chushouya.com/assets/images/nav/tabar_homepage_selected.png",
        text: "首页"
      }, {
        type: "category",
        pagePath: "/pages/category/index",
        icon: "https://image.chushouya.com/assets/images/nav/tabar_category_unselected.png",
        selectIcon: "https://image.chushouya.com/assets/images/nav/tabar_category_selected.png",
        text: "栏目页"
      }, {
        type: "user",
        pagePath: "/pages/user/index",
        icon: "https://image.chushouya.com/assets/images/nav/tabar_personal_unselected.png",
        selectIcon: "https://image.chushouya.com/assets/images/nav/tabar_personal_selected.png",
        text: "我的"
      }]
    }
  },
  methods: {
    //跳转到分类页面
    handleCategory() {
      uni.navigateTo({
        url: "/pages/category/index"
      })
    },
    //点击跳转
    switchTab(item, index) {
      // #ifdef MP-WEIXIN
      uni.switchTab({
        url: item.pagePath
      })
      // #endif
      // #ifndef MP-WEIXIN
      uni.navigateTo({
        url: item.pagePath
      })
      // #endif
    }
  }
}
</script>

<style lang="scss">
.tab-bg {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.tab-bar {

  height: 120rpx;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
  justify-content: center;
  align-items: center;
  // padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部


  .item {
    text-align: center;
    .text {
      font-size: var(--hui-font-size-22);
      color: #B1B5C2;
      margin-top: 6rpx;
    }
  }

  .active {
    .text {
      color: var(--hui-color-title);
    }
  }

  .btn {
    width: 252rpx;
    height: 120rpx;
    background: url(https://image.chushouya.com/assets/images/nav/huishou_btn.png) center center no-repeat;
    background-size: 100% 100%;
    margin: 0 72rpx;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg)
    }

    100% {
      transform: rotate(360deg)
    }
  }
}
</style>